<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.2" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="Hexo, NexT" />








  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.2" />






<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="zh-Hans">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.2',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/"/>





  <title>Hexo</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left 
  page-home">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Hexo</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            
  <section id="posts" class="posts-expand">
    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/06/vue-cli/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/12/06/vue-cli/" itemprop="url">vue-cli</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-06T12:50:17+08:00">
                2017-12-06
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="生成项目"><a href="#生成项目" class="headerlink" title="生成项目"></a>生成项目</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">vue init webpack 项目名称</div></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">npm run build</div></pre></td></tr></table></figure>
          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/06/webpack/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/12/06/webpack/" itemprop="url">Vue.js-Webpack</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-06T12:50:16+08:00">
                2017-12-06
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="在网页中会引用哪些常见的静态资源？"><a href="#在网页中会引用哪些常见的静态资源？" class="headerlink" title="在网页中会引用哪些常见的静态资源？"></a>在网页中会引用哪些常见的静态资源？</h2><ul>
<li>JS<ul>
<li>.js  .jsx  .coffee  .ts（TypeScript  类 C# 语言）</li>
</ul>
</li>
<li>CSS<ul>
<li>.css  .less   .sass  .scss</li>
</ul>
</li>
<li>Images<ul>
<li>.jpg   .png   .gif   .bmp   .svg</li>
</ul>
</li>
<li>字体文件（Fonts）<ul>
<li>.svg   .ttf   .eot   .woff   .woff2</li>
</ul>
</li>
<li>模板文件<ul>
<li>.ejs   .jade  .vue【这是在webpack中定义组件的方式，推荐这么用】</li>
</ul>
</li>
</ul>
<h2 id="网页中引入的静态资源多了以后有什么问题？？？"><a href="#网页中引入的静态资源多了以后有什么问题？？？" class="headerlink" title="网页中引入的静态资源多了以后有什么问题？？？"></a>网页中引入的静态资源多了以后有什么问题？？？</h2><ol>
<li>网页加载速度慢， 因为 我们要发起很多的二次请求；</li>
<li>要处理错综复杂的依赖关系</li>
</ol>
<h2 id="如何解决上述两个问题"><a href="#如何解决上述两个问题" class="headerlink" title="如何解决上述两个问题"></a>如何解决上述两个问题</h2><ol>
<li>合并、压缩、精灵图、图片的Base64编码</li>
<li>可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；</li>
</ol>
<h2 id="什么是webpack"><a href="#什么是webpack" class="headerlink" title="什么是webpack?"></a>什么是webpack?</h2><p>webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；</p>
<h2 id="如何完美实现上述的2种解决方案"><a href="#如何完美实现上述的2种解决方案" class="headerlink" title="如何完美实现上述的2种解决方案"></a>如何完美实现上述的2种解决方案</h2><ol>
<li>使用Gulp， 是基于 task 任务的；</li>
<li>使用Webpack， 是基于整个项目进行构建的；</li>
</ol>
<ul>
<li>借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。</li>
<li>根据官网的图片介绍webpack打包的过程</li>
<li><a href="http://webpack.github.io/" target="_blank" rel="external">webpack官网</a></li>
</ul>
<h2 id="webpack安装的两种方式"><a href="#webpack安装的两种方式" class="headerlink" title="webpack安装的两种方式"></a>webpack安装的两种方式</h2><ol>
<li>运行<code>npm i webpack -g</code>全局安装webpack，这样就能在全局使用webpack的命令</li>
<li>在项目根目录中运行<code>npm i webpack --save-dev</code>安装到项目依赖中</li>
</ol>
<h2 id="初步使用webpack打包构建列表隔行变色案例"><a href="#初步使用webpack打包构建列表隔行变色案例" class="headerlink" title="初步使用webpack打包构建列表隔行变色案例"></a>初步使用webpack打包构建列表隔行变色案例</h2><ol>
<li>运行<code>npm init</code>初始化项目，使用npm管理项目中的依赖包</li>
<li>创建项目基本的目录结构</li>
<li>使用<code>cnpm i jquery --save</code>安装jquery类库</li>
<li><p>创建<code>main.js</code>并书写各行变色的代码逻辑：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">// 导入jquery类库</div><div class="line">   import $ from &apos;jquery&apos;</div><div class="line"></div><div class="line">   // 设置偶数行背景色，索引从0开始，0是偶数</div><div class="line">   $(&apos;#list li:even&apos;).css(&apos;backgroundColor&apos;,&apos;lightblue&apos;);</div><div class="line">   // 设置奇数行背景色</div><div class="line">   $(&apos;#list li:odd&apos;).css(&apos;backgroundColor&apos;,&apos;pink&apos;);</div></pre></td></tr></table></figure>
</li>
<li><p>直接在页面上引用<code>main.js</code>会报错，因为浏览器不认识<code>import</code>这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；</p>
</li>
<li>运行<code>webpack 入口文件路径 输出文件路径</code>对<code>main.js</code>进行处理：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">webpack src/js/main.js dist/bundle.js</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="使用webpack的配置文件简化打包时候的命令"><a href="#使用webpack的配置文件简化打包时候的命令" class="headerlink" title="使用webpack的配置文件简化打包时候的命令"></a>使用webpack的配置文件简化打包时候的命令</h2><ol>
<li>在项目根目录中创建<code>webpack.config.js</code></li>
<li>由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在<code>webpack.config.js</code>中配置这两个路径：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">// 导入处理路径的模块</div><div class="line">var path = require(&apos;path&apos;);</div><div class="line"></div><div class="line">// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理</div><div class="line">module.exports = &#123;</div><div class="line">    entry: path.resolve(__dirname, &apos;src/js/main.js&apos;), // 项目入口文件</div><div class="line">    output: &#123; // 配置输出选项</div><div class="line">        path: path.resolve(__dirname, &apos;dist&apos;), // 配置输出的路径</div><div class="line">        filename: &apos;bundle.js&apos; // 配置输出的文件名</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="实现webpack的实时打包构建"><a href="#实现webpack的实时打包构建" class="headerlink" title="实现webpack的实时打包构建"></a>实现webpack的实时打包构建</h2><ol>
<li>由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用<code>webpack-dev-server</code>来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。</li>
<li>运行<code>cnpm i webpack-dev-server --save-dev</code>安装到开发依赖</li>
<li><p>安装完成之后，在命令行直接运行<code>webpack-dev-server</code>来进行打包，发现报错，此时需要借助于<code>package.json</code>文件中的指令，来进行运行<code>webpack-dev-server</code>命令，在<code>scripts</code>节点下新增<code>&quot;dev&quot;: &quot;webpack-dev-server&quot;</code>指令，发现可以进行实时打包，但是dist目录下并没有生成<code>bundle.js</code>文件，这是因为<code>webpack-dev-server</code>将打包好的文件放在了内存中</p>
<ul>
<li>把<code>bundle.js</code>放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快</li>
<li>这个时候访问webpack-dev-server启动的<code>http://localhost:8080/</code>网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<code>&lt;script src=&quot;../bundle.js&quot;&gt;&lt;/script&gt;</code></li>
<li>为了能在访问<code>http://localhost:8080/</code>的时候直接访问到index首页，可以使用<code>--contentBase src</code>指令来修改dev指令，指定启动的根目录：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&quot;dev&quot;: &quot;webpack-dev-server --contentBase src&quot;</div></pre></td></tr></table></figure>
</li>
</ul>
<p>同时修改index页面中script的src属性为<code>&lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;</code></p>
</li>
</ol>
<h2 id="使用html-webpack-plugin插件配置启动页面"><a href="#使用html-webpack-plugin插件配置启动页面" class="headerlink" title="使用html-webpack-plugin插件配置启动页面"></a>使用<code>html-webpack-plugin</code>插件配置启动页面</h2><p>由于使用<code>--contentBase</code>指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用<code>html-webpack-plugin</code>插件配置启动页面.</p>
<ol>
<li>运行<code>cnpm i html-webpack-plugin --save-dev</code>安装到开发依赖</li>
<li><p>修改<code>webpack.config.js</code>配置文件如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">// 导入处理路径的模块</div><div class="line">var path = require(&apos;path&apos;);</div><div class="line">// 导入自动生成HTMl文件的插件</div><div class="line">var htmlWebpackPlugin = require(&apos;html-webpack-plugin&apos;);</div><div class="line"></div><div class="line">module.exports = &#123;</div><div class="line">    entry: path.resolve(__dirname, &apos;src/js/main.js&apos;), // 项目入口文件</div><div class="line">    output: &#123; // 配置输出选项</div><div class="line">        path: path.resolve(__dirname, &apos;dist&apos;), // 配置输出的路径</div><div class="line">        filename: &apos;bundle.js&apos; // 配置输出的文件名</div><div class="line">    &#125;,</div><div class="line">    plugins:[ // 添加plugins节点配置插件</div><div class="line">        new htmlWebpackPlugin(&#123;</div><div class="line">            template:path.resolve(__dirname, &apos;src/index.html&apos;),//模板路径</div><div class="line">            filename:&apos;index.html&apos;//自动生成的HTML文件的名称</div><div class="line">        &#125;)</div><div class="line">    ]</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p>修改<code>package.json</code>中<code>script</code>节点中的dev指令如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&quot;dev&quot;: &quot;webpack-dev-server&quot;</div></pre></td></tr></table></figure>
</li>
<li><p>将index.html中script标签注释掉，因为<code>html-webpack-plugin</code>插件会自动把bundle.js注入到index.html页面中！</p>
</li>
</ol>
<h2 id="实现自动打开浏览器、热更新和配置浏览器的默认端口号"><a href="#实现自动打开浏览器、热更新和配置浏览器的默认端口号" class="headerlink" title="实现自动打开浏览器、热更新和配置浏览器的默认端口号"></a>实现自动打开浏览器、热更新和配置浏览器的默认端口号</h2><p><strong>注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！</strong></p>
<h3 id="方式1："><a href="#方式1：" class="headerlink" title="方式1："></a>方式1：</h3><ul>
<li>修改<code>package.json</code>的script节点如下，其中<code>--open</code>表示自动打开浏览器，<code>--port 4321</code>表示打开的端口号为4321，<code>--hot</code>表示启用浏览器热更新：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&quot;dev&quot;: &quot;webpack-dev-server --hot --port 4321 --open&quot;</div></pre></td></tr></table></figure>
</li>
</ul>
<h3 id="方式2："><a href="#方式2：" class="headerlink" title="方式2："></a>方式2：</h3><ol>
<li><p>修改<code>webpack.config.js</code>文件，新增<code>devServer</code>节点如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">devServer:&#123;</div><div class="line">        hot:true, //启动热更新的第一步</div><div class="line">        open:true,</div><div class="line">        port:4321</div><div class="line">    &#125;</div></pre></td></tr></table></figure>
</li>
<li><p>在头部引入<code>webpack</code>模块：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">var webpack = require(&apos;webpack&apos;); //启动热更新的第二步</div></pre></td></tr></table></figure>
</li>
<li><p>在<code>plugins</code>节点下新增：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">new webpack.HotModuleReplacementPlugin() //new 一个热更新的 模块对象， 这是 启用热更新的第 3 步</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="使用webpack打包css文件"><a href="#使用webpack打包css文件" class="headerlink" title="使用webpack打包css文件"></a>使用webpack打包css文件</h2><ol>
<li>运行<code>cnpm i style-loader css-loader --save-dev</code></li>
<li><p>修改<code>webpack.config.js</code>这个配置文件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">module: &#123; // 用来配置第三方loader模块的</div><div class="line">        rules: [ // 文件的匹配规则</div><div class="line">            &#123; test: /\.css$/, use: [&apos;style-loader&apos;, &apos;css-loader&apos;] &#125;//处理css文件的规则</div><div class="line">        ]</div><div class="line">    &#125;</div></pre></td></tr></table></figure>
</li>
<li><p>注意：<code>use</code>表示使用哪些模块来处理<code>test</code>所匹配到的文件；<code>use</code>中相关loader模块的调用顺序是从后向前调用的；</p>
</li>
</ol>
<h2 id="使用webpack打包less文件"><a href="#使用webpack打包less文件" class="headerlink" title="使用webpack打包less文件"></a>使用webpack打包less文件</h2><ol>
<li>运行<code>cnpm i less-loader less -D</code></li>
<li>修改<code>webpack.config.js</code>这个配置文件：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; test: /\.less$/, use: [&apos;style-loader&apos;, &apos;css-loader&apos;, &apos;less-loader&apos;] &#125;,</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="使用webpack打包sass文件"><a href="#使用webpack打包sass文件" class="headerlink" title="使用webpack打包sass文件"></a>使用webpack打包sass文件</h2><ol>
<li>运行<code>cnpm i sass-loader node-sass --save-dev</code></li>
<li>在<code>webpack.config.js</code>中添加处理sass文件的loader模块：<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; test: /\.scss$/, use: [&apos;style-loader&apos;, &apos;css-loader&apos;, &apos;sass-loader&apos;] &#125;</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="使用webpack处理css中的路径"><a href="#使用webpack处理css中的路径" class="headerlink" title="使用webpack处理css中的路径"></a>使用webpack处理css中的路径</h2><ol>
<li>运行<code>cnpm i url-loader file-loader --save-dev</code></li>
<li><p>在<code>webpack.config.js</code>中添加处理url路径的loader模块：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; test: /\.(png|jpg|gif)$/, use: &apos;url-loader&apos; &#125;</div></pre></td></tr></table></figure>
</li>
<li><p>可以通过<code>limit</code>指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; test: /\.(png|jpg|gif)$/, use: &apos;url-loader?limit=43960&apos; &#125;,</div></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="使用babel处理高级JS语法"><a href="#使用babel处理高级JS语法" class="headerlink" title="使用babel处理高级JS语法"></a>使用babel处理高级JS语法</h2><ol>
<li>运行<code>cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev</code>安装babel的相关loader包</li>
<li>运行<code>cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev</code>安装babel转换的语法</li>
<li><p>在<code>webpack.config.js</code>中添加相关loader模块，其中需要注意的是，一定要把<code>node_modules</code>文件夹添加到排除项：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123; test: /\.js$/, use: &apos;babel-loader&apos;, exclude: /node_modules/ &#125;</div></pre></td></tr></table></figure>
</li>
<li><p>在项目根目录中添加<code>.babelrc</code>文件，并修改这个配置文件如下：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">    &quot;presets&quot;:[&quot;es2015&quot;, &quot;stage-0&quot;],</div><div class="line">    &quot;plugins&quot;:[&quot;transform-runtime&quot;]</div><div class="line">&#125;</div></pre></td></tr></table></figure>
</li>
<li><p><strong>注意：语法插件<code>babel-preset-es2015</code>可以更新为<code>babel-preset-env</code>，它包含了所有的ES相关的语法；</strong></p>
</li>
</ol>
<h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><p><a href="https://segmentfault.com/p/1210000008466178" target="_blank" rel="external">babel-preset-env：你需要的唯一Babel插件</a><br><a href="https://segmentfault.com/a/1190000009065987" target="_blank" rel="external">Runtime transform 运行时编译es6</a></p>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/12/06/vue/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/12/06/vue/" itemprop="url">Vue</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-06T12:50:16+08:00">
                2017-12-06
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          
            <h2 id="MVC和MVVM的区别"><a href="#MVC和MVVM的区别" class="headerlink" title="MVC和MVVM的区别"></a>MVC和MVVM的区别</h2><p><img src="https://github.com/Shine-wl/Shine-wl.github.io/blob/master/img/01.MVC%E5%92%8CMVVM%E7%9A%84%E5%85%B3%E7%B3%BB%E5%9B%BE%E8%A7%A3.png?raw=true" alt="image"></p>
<h2 id="基本代码-MVVM模式"><a href="#基本代码-MVVM模式" class="headerlink" title="基本代码  MVVM模式"></a>基本代码  MVVM模式</h2><p>注意：</p>
<ol>
<li>vue实例不能控制 body 及 div中的那个 id=’app’ 不能写到body上</li>
<li>通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】</li>
<li>methods里的方法要使用data里面的数据，那么就要使用this</li>
</ol>
<p><strong>MVVM在vue中的体现</strong>：</p>
<p>​    vue所控制的区域对应 V</p>
<p>​    vm实例对应的是 VM</p>
<p>​    data对应的是 M</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 1. 导入Vue的包 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 --&gt;</span></div><div class="line">  </div><div class="line">  <span class="comment">&lt;!-- Vue 实例所控制的这个元素区域，就是我们的 V  --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; msg &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 2. 创建一个Vue的实例</span></span></div><div class="line"><span class="javascript">    <span class="comment">// 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数</span></span></div><div class="line"><span class="undefined">    </span></div><div class="line"><span class="javascript">    <span class="comment">//  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,  <span class="comment">// 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域</span></span></div><div class="line"><span class="undefined">      </span></div><div class="line"><span class="javascript">      <span class="comment">// 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的</span></span></div><div class="line"><span class="javascript">      data: &#123; <span class="comment">// data 属性中，存放的是 el 中要用到的数据</span></span></div><div class="line"><span class="undefined">        </span></div><div class="line"><span class="javascript">        msg: <span class="string">'欢迎学习Vue'</span> <span class="comment">// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】</span></span></div><div class="line"><span class="undefined">        </span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="javascript">      methods:&#123;<span class="comment">//定义方法的地方</span></span></div><div class="line"><span class="undefined">        </span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">      </span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="插值表达式"><a href="#插值表达式" class="headerlink" title="插值表达式"></a>插值表达式</h2><h3 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak"></a>v-cloak</h3><p>使用 v-cloak 能够解决 插值表达式闪烁的问题</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-cloak</span>&gt;</span>++++++++ &#123;&#123; msg &#125;&#125; ----------<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h3><p>默认 v-text 是没有闪烁问题的</p>
<p>注意：v-text会覆盖元素中原本的内容，但是 插值表达式  只会替换自己的这个占位符，不会把 整个元素的内容清空</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h4</span> <span class="attr">v-text</span>=<span class="string">"msg"</span>&gt;</span>==================<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">结果是 msg的值 那些等号会被覆盖掉</div></pre></td></tr></table></figure>
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h3><p>v-html能够解析html标签</p>
<p>注意：标签内的内容会被覆盖掉</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-html</span>=<span class="string">"msg2"</span>&gt;</span>1212112<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">msg2的值是 <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="v-bind（缩写是-）"><a href="#v-bind（缩写是-）" class="headerlink" title="v-bind（缩写是:）"></a>v-bind（缩写是:）</h3><p>v-bind: 是 Vue中，提供的用于绑定属性的指令 </p>
<p>注意：</p>
<ol>
<li><p>v-bind: 指令可以被简写为 :要绑定的属性 </p>
</li>
<li><p>v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V， 无法实现数据的双向绑定</p>
</li>
<li><p>v-bind 中，可以写合法的JS表达式</p>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">不简写：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮"</span> <span class="attr">v-bind:title</span>=<span class="string">"mytitle + '123'"</span>&gt;</span></div><div class="line">简写：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮"</span> <span class="attr">:title</span>=<span class="string">"mytitle + '123'"</span>&gt;</span></div><div class="line"></div><div class="line">mytitle是data中的数据</div></pre></td></tr></table></figure>
<h3 id="v-on（缩写是-）"><a href="#v-on（缩写是-）" class="headerlink" title="v-on（缩写是@）"></a>v-on（缩写是@）</h3><p>Vue 中提供了 v-on: 事件绑定机制 </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!--show是方法 可以加括号也可以不加括号--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"按钮"</span> <span class="attr">v-on:click</span>=<span class="string">"show"</span>&gt;</span></div><div class="line"></div><div class="line">show对应的方法是 function()&#123; alert('hello') &#125;</div></pre></td></tr></table></figure>
<h3 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h3><p>使用  v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定 </p>
<p> 注意： v-model 只能运用在 表单元素中</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">style</span>=<span class="string">"width:100%;"</span> <span class="attr">v-model</span>=<span class="string">"msg"</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="v-for"><a href="#v-for" class="headerlink" title="v-for"></a>v-for</h3><p>语法：v-for=”(item,i) in list”</p>
<p>注意：in 后面我们放过  普通数组，对象数组，对象， 还可以放数字</p>
<p><strong>v-for循环普通的数组</strong></p>
<p>item：循环的每一项</p>
<p>i：索引值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item, i) in list"</span>&gt;</span>索引值：&#123;&#123;i&#125;&#125; --- 每一项：&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="undefined">        list: [1, 2, 3, 4, 5, 6]</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p><strong>v-for循环对象数组</strong></p>
<p>item：循环的每一项</p>
<p>i：索引值</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(user, i) in list"</span>&gt;</span>Id：&#123;&#123; user.id &#125;&#125; --- 名字：&#123;&#123; user.name &#125;&#125; --- 索引：&#123;&#123;i&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  </div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="undefined">        list: [</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">'zs1'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'zs2'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">name</span>: <span class="string">'zs3'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'zs4'</span> &#125;</span></div><div class="line"><span class="undefined">        ]</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p><strong>v-for循环对象</strong></p>
<p>val：值</p>
<p>key：键</p>
<p>i：索引</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 注意：在遍历对象身上的键值对的时候， 除了 有  val  key  ,在第三个位置还有 一个 索引  --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(val, key, i) in user"</span>&gt;</span>值是： &#123;&#123; val &#125;&#125; --- 键是： &#123;&#123;key&#125;&#125; -- 索引： &#123;&#123;i&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="undefined">        user: &#123;</span></div><div class="line"><span class="undefined">          id: 1,</span></div><div class="line"><span class="javascript">          name: <span class="string">'托尼·屎大颗'</span>,</span></div><div class="line"><span class="javascript">          gender: <span class="string">'男'</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p><strong>v-for迭代数字</strong></p>
<p>注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- in 后面我们放过  普通数组，对象数组，对象， 还可以放数字 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"count in 10"</span>&gt;</span>这是第 &#123;&#123; count &#125;&#125; 次循环<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h4 id="v-for中的-key的使用"><a href="#v-for中的-key的使用" class="headerlink" title="v-for中的 key的使用"></a>v-for中的 key的使用</h4><p>注意：</p>
<ol>
<li>v-for 循环的时候，key 属性只能使用 number获取string</li>
<li>key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值</li>
<li>在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值</li>
</ol>
<p>这是一个可以体现出这个问题的小案例运行一下我想你就会明白了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span>Id:</div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"id"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line"></div><div class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span>Name:</div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line"></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"添加"</span> @<span class="attr">click</span>=<span class="string">"add"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"item in list"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span>&gt;</span>&#123;&#123;item.id&#125;&#125; --- &#123;&#123;item.name&#125;&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        id: <span class="string">''</span>,</span></div><div class="line"><span class="javascript">        name: <span class="string">''</span>,</span></div><div class="line"><span class="undefined">        list: [</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">'李斯'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'嬴政'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">name</span>: <span class="string">'赵高'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'韩非'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">5</span>, <span class="attr">name</span>: <span class="string">'荀子'</span> &#125;</span></div><div class="line"><span class="undefined">        ]</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="javascript">        add() &#123; <span class="comment">// 添加方法</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.list.unshift(&#123; <span class="attr">id</span>: <span class="keyword">this</span>.id, <span class="attr">name</span>: <span class="keyword">this</span>.name &#125;)</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="v-if和v-show"><a href="#v-if和v-show" class="headerlink" title="v-if和v-show"></a>v-if和v-show</h3><p>比较：</p>
<p><strong>v-if 特点</strong>：每次都会重新删除或创建元素，有较高的切换性能消耗</p>
<p><strong>v-show  特点</strong>： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗</p>
<p>使用：</p>
<p>v-if 有较高的切换性能消耗：如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show，因为每次切换都会删除或创建元素</p>
<p>v-show 有较高的初始渲染消耗：如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if</p>
<p>xiang</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- &lt;input type="button" value="toggle" @click="toggle"&gt; --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- v-if 的特点：每次都会重新删除或创建元素 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 --&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- v-if 有较高的切换性能消耗 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- v-show 有较高的初始渲染消耗 --&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是用v-if控制的元素<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-show</span>=<span class="string">"flag"</span>&gt;</span>这是用v-show控制的元素<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        flag: <span class="literal">false</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        /* toggle() &#123;</span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.flag = !<span class="keyword">this</span>.flag</span></div><div class="line"><span class="undefined">        &#125; */</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h2><p><strong>.stop和.self的区别</strong>：  .stop会阻止冒泡行为，除了被点击元素以为，别的元素的点击事件都不会被触发 而.self只是当前元素自己不点击不会触发，而其他的元素依然会被触发点击事件</p>
<h3 id="stop"><a href="#stop" class="headerlink" title=".stop"></a>.stop</h3><p>使用  .stop  阻止冒泡，点击只会触发 input的点击事件而div的点击事件不会触发</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click</span>=<span class="string">"div1Handler"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"戳他"</span> @<span class="attr">click.stop</span>=<span class="string">"btnHandler"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="prevent"><a href="#prevent" class="headerlink" title=".prevent"></a>.prevent</h3><p>使用 .prevent 阻止默认行为，可以阻止a标签的默认跳转</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> @<span class="attr">click.prevent</span>=<span class="string">"linkClick"</span>&gt;</span>有问题，先去百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="capture"><a href="#capture" class="headerlink" title=".capture"></a>.capture</h3><p>使用  .capture 实现捕获触发事件的机制,会先执行div的点击事件，在执行input的点击事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click.capture</span>=<span class="string">"div1Handler"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"戳他"</span> @<span class="attr">click</span>=<span class="string">"btnHandler"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="self"><a href="#self" class="headerlink" title=".self"></a>.self</h3><p>使用 .self 实现只有点击当前元素时候，才会触发事件处理函数   </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"inner"</span> @<span class="attr">click.self</span>=<span class="string">"div1Handler"</span>&gt;</span></div><div class="line">   <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"戳他"</span> @<span class="attr">click</span>=<span class="string">"btnHandler"</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="once"><a href="#once" class="headerlink" title=".once"></a>.once</h3><p>使用 .once 只触发一次事件处理函数</p>
<p>第一个：只会执行一次点击事件</p>
<p>第二个：只会执行一次点击事件和一次默认事件阻止事件，再点就会跳转百度</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:void(0)"</span> <span class="attr">v-on:click.once</span>=<span class="string">"href"</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.baidu.com"</span> <span class="attr">v-on:click.prevent.once</span>=<span class="string">"href"</span>&gt;</span>百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="vue中绑定样式两种方式"><a href="#vue中绑定样式两种方式" class="headerlink" title="vue中绑定样式两种方式"></a>vue中绑定样式两种方式</h2><h3 id="v-bind-class"><a href="#v-bind-class" class="headerlink" title="v-bind:class"></a>v-bind:class</h3><p>直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['thin', 'italic']"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>在数组中使用三元表达式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['thin', 'italic', flag?'active':'']"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>在数组中使用 对象来代替三元表达式，提高代码的可读性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['thin', 'italic', &#123;'active':flag&#125; ]"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"&#123; red: true, thin: true, italic: flag, active: false &#125;"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>也可以把这些对象抽离出来保存到一个变量内</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">'app'</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"classObj"</span>&gt;</span>这是一个很大很大的H1，大到你无法想象！！！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        flag: <span class="literal">true</span>,</span></div><div class="line"><span class="javascript">        classObj: &#123; <span class="attr">red</span>: <span class="literal">true</span>, <span class="attr">thin</span>: <span class="literal">true</span>, <span class="attr">italic</span>: flag, <span class="attr">active</span>: <span class="literal">false</span> &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="v-bind-style"><a href="#v-bind-style" class="headerlink" title="v-bind:style"></a>v-bind:style</h3><p>对象就是无序键值对的集合</p>
<p>使用对象的方式，注意带横线的 比如 font-weight 要使用引号括起来</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"&#123; color: 'red', 'font-weight': 200 &#125;"</span>&gt;</span>这是一个h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>将对象抽离出来保存到变量中</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"styleObj1"</span>&gt;</span>这是一个h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>使用数组的方式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"[ styleObj1, styleObj2 ]"</span>&gt;</span>这是一个h1<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div></pre></td></tr></table></figure>
<p>将对象处理出来</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        styleObj1: &#123; <span class="attr">color</span>: <span class="string">'red'</span>, <span class="string">'font-weight'</span>: <span class="number">200</span> &#125;,</span></div><div class="line"><span class="javascript">        styleObj2: &#123; <span class="string">'font-style'</span>: <span class="string">'italic'</span> &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="自定义过滤器"><a href="#自定义过滤器" class="headerlink" title="自定义过滤器"></a>自定义过滤器</h2><p>注意：可以传递多个参数，但是函数内的第一个参数是管道符前面的那个值，调用的时候，管道符前面的值不用自己传递，所以在方法内只需要协商自己想要传递的参数就可以了</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">&#123;&#123; ctime | dateFormat('过滤的条件') &#125;&#125;</div></pre></td></tr></table></figure>
<p>###定义全局过滤器</p>
<p>语法：<strong>定义全局过滤器</strong>，所有的VM实例都可以共享</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//参数1 是要被过滤的值 及 管道符前面的那个值</span></div><div class="line"><span class="comment">//参数2 是过滤的条件</span></div><div class="line">Vue.filter(<span class="string">'过滤器的名字'</span>，<span class="function"><span class="keyword">function</span>(<span class="params"><span class="string">'参数1'</span>，<span class="string">'参数2'</span></span>)</span>&#123;</div><div class="line">  <span class="keyword">return</span> <span class="string">'想要返回的结果'</span>;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>例子：过滤时间的过滤器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 全局的过滤器， 进行时间的格式化</span></div><div class="line">  <span class="comment">// 所谓的全局过滤器，就是所有的VM实例都共享的</span></div><div class="line">  Vue.filter(<span class="string">'dateFormat'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">dateStr, pattern = <span class="string">""</span></span>) </span>&#123;</div><div class="line">    <span class="comment">// 根据给定的时间字符串，得到特定的时间</span></div><div class="line">    <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="built_in">Date</span>(dateStr)</div><div class="line"></div><div class="line">    <span class="comment">//   yyyy-mm-dd</span></div><div class="line">    <span class="keyword">var</span> y = dt.getFullYear()</div><div class="line">    <span class="keyword">var</span> m = dt.getMonth() + <span class="number">1</span></div><div class="line">    <span class="keyword">var</span> d = dt.getDate()</div><div class="line"></div><div class="line">    <span class="keyword">if</span> (pattern.toLowerCase() === <span class="string">'yyyy-mm-dd'</span>) &#123;</div><div class="line">      <span class="comment">//`$&#123;y&#125;-$&#123;m&#125;-$&#123;d&#125;` Es6表示字符串的新语法 $&#123;&#125; 大括号内表示要插入变量</span></div><div class="line">      <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span></div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">      <span class="keyword">var</span> hh = dt.getHours()</div><div class="line">      <span class="keyword">var</span> mm = dt.getMinutes()</div><div class="line">      <span class="keyword">var</span> ss = dt.getSeconds()</div><div class="line"></div><div class="line">      <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span>`</span></div><div class="line">    &#125;</div><div class="line">  &#125;)</div></pre></td></tr></table></figure>
<p>###<strong>定义私有过滤器</strong></p>
<p>定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】</p>
<p>处理函数内部所做的事情跟全局过滤器所做的事情一样</p>
<p>规则：过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> vm2 = <span class="keyword">new</span> Vue(&#123;</div><div class="line">      el: <span class="string">'#app2'</span>,</div><div class="line">      data: &#123;</div><div class="line">        dt: <span class="keyword">new</span> <span class="built_in">Date</span>()</div><div class="line">      &#125;,</div><div class="line">      methods: &#123;&#125;,</div><div class="line">      filters: &#123;</div><div class="line">        <span class="comment">//dateFormat 过滤器的名字  </span></div><div class="line">        dateFormat: <span class="function"><span class="keyword">function</span> (<span class="params">dateStr, pattern = <span class="string">''</span></span>) </span>&#123;</div><div class="line">          <span class="comment">// 根据给定的时间字符串，得到特定的时间</span></div><div class="line">          <span class="keyword">var</span> dt = <span class="keyword">new</span> <span class="built_in">Date</span>(dateStr)</div><div class="line">          <span class="comment">//   yyyy-mm-dd</span></div><div class="line">          <span class="keyword">var</span> y = dt.getFullYear()</div><div class="line">          <span class="keyword">var</span> m = (dt.getMonth() + <span class="number">1</span>).toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</div><div class="line">          <span class="keyword">var</span> d = dt.getDate().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</div><div class="line"></div><div class="line">          <span class="keyword">if</span> (pattern.toLowerCase() === <span class="string">'yyyy-mm-dd'</span>) &#123;</div><div class="line">            <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span>`</span></div><div class="line">          &#125; <span class="keyword">else</span> &#123;</div><div class="line">            <span class="keyword">var</span> hh = dt.getHours().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</div><div class="line">            <span class="keyword">var</span> mm = dt.getMinutes().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</div><div class="line">            <span class="keyword">var</span> ss = dt.getSeconds().toString().padStart(<span class="number">2</span>, <span class="string">'0'</span>)</div><div class="line"></div><div class="line">            <span class="keyword">return</span> <span class="string">`<span class="subst">$&#123;y&#125;</span>-<span class="subst">$&#123;m&#125;</span>-<span class="subst">$&#123;d&#125;</span> <span class="subst">$&#123;hh&#125;</span>:<span class="subst">$&#123;mm&#125;</span>:<span class="subst">$&#123;ss&#125;</span> ~~~~~~~`</span></div><div class="line">          &#125;</div><div class="line">        &#125;</div><div class="line">      &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h2 id="自定义全局按键修饰符"><a href="#自定义全局按键修饰符" class="headerlink" title="自定义全局按键修饰符"></a>自定义全局按键修饰符</h2><p>f2是被绑定的键     113是键的值</p>
<p>使用方法，与上面的事件修饰符一样</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Vue.config.keyCodes.f2 = <span class="number">113</span></div></pre></td></tr></table></figure>
<h2 id="自定义指令"><a href="#自定义指令" class="headerlink" title="自定义指令"></a>自定义指令</h2><p>注意： Vue中所有的指令，在调用的时候，都以 v- 开头</p>
<p><strong>自定义全局指令</strong></p>
<p>以绑定一个自动获取焦点为例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">Vue.directive(<span class="string">'focus'</span>, &#123;</div><div class="line">     bind: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123; <span class="comment">// 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次</span></div><div class="line">       <span class="comment">// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象</span></div><div class="line">       <span class="comment">// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用</span></div><div class="line">       <span class="comment">//  因为，一个元素，只有插入DOM之后，才能获取焦点</span></div><div class="line"></div><div class="line">     &#125;,</div><div class="line">     inserted: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;  <span class="comment">// inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】</span></div><div class="line">       <span class="comment">// 和JS行为有关的操作，最好在 inserted 中去执行，放置bind JS行为不生效</span></div><div class="line">       el.focus();</div><div class="line">     &#125;,</div><div class="line">     updated: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;  <span class="comment">// 当VNode更新的时候，会执行 updated， 可能会触发多次</span></div><div class="line">     &#125;</div><div class="line">   &#125;)</div></pre></td></tr></table></figure>
<p>参数详解：<a href="https://cn.vuejs.org/v2/guide/custom-directive.html#钩子函数" target="_blank" rel="external">自定指令钩子函数及内部参数</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line">Vue.directive(<span class="string">'color'</span>, &#123;</div><div class="line">     <span class="comment">// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式</span></div><div class="line">     <span class="comment">// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素</span></div><div class="line">     <span class="comment">// 和样式相关的操作，一般都可以在 bind 执行</span></div><div class="line">     bind: <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</div><div class="line">      <span class="built_in">console</span>.log(binding.name); <span class="comment">//自定义指令名字</span></div><div class="line">      <span class="built_in">console</span>.log(binding.expression); <span class="comment">//自定义指令属性的值，引号里面是什么内容得到的就是什么内容 比如说v-color="'skyblue'" 那么得到的是'skyblue'</span></div><div class="line">      <span class="built_in">console</span>.log(binding.value); <span class="comment">//自定义指令的值，比如说 v-color="'skyblue'" 那么得到的是 skyblue</span></div><div class="line">       el.style.color = binding.value</div><div class="line">     &#125;</div><div class="line">   &#125;)</div></pre></td></tr></table></figure>
<p><strong>自定义私有指令</strong></p>
<p>fontsize 是简写的自定义指令</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> vm2 = <span class="keyword">new</span> Vue(&#123;</div><div class="line">      el: <span class="string">'#app2'</span>,</div><div class="line">      data: &#123;</div><div class="line">        dt: <span class="keyword">new</span> <span class="built_in">Date</span>()</div><div class="line">      &#125;,</div><div class="line">      methods: &#123;&#125;,</div><div class="line">      directives: &#123; <span class="comment">// 自定义私有指令</span></div><div class="line">        <span class="string">'fontweight'</span>: &#123; <span class="comment">// 设置字体粗细的</span></div><div class="line">          bind: <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123;</div><div class="line">            el.style.fontWeight = binding.value</div><div class="line">          &#125;</div><div class="line">        &#125;,</div><div class="line">        <span class="string">'fontsize'</span>: <span class="function"><span class="keyword">function</span> (<span class="params">el, binding</span>) </span>&#123; <span class="comment">// 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去</span></div><div class="line">          el.style.fontSize = <span class="built_in">parseInt</span>(binding.value) + <span class="string">'px'</span></div><div class="line">        &#125;</div><div class="line">      &#125;</div><div class="line">    &#125;)</div></pre></td></tr></table></figure>
<h2 id="生命周期函数–钩子函数"><a href="#生命周期函数–钩子函数" class="headerlink" title="生命周期函数–钩子函数"></a>生命周期函数–钩子函数</h2><p><img src="https://github.com/Shine-wl/Shine-wl.github.io/blob/master/img/lifecycle.png?raw=true" alt="生命周期函数图解"></p>
<p>代码演示：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">      el: <span class="string">'#app'</span>,</div><div class="line">      data: &#123;</div><div class="line">        msg: <span class="string">'ok'</span></div><div class="line">      &#125;,</div><div class="line">      methods: &#123;</div><div class="line">        show() &#123;</div><div class="line">          <span class="built_in">console</span>.log(<span class="string">'执行了show方法'</span>)</div><div class="line">        &#125;</div><div class="line">      &#125;,</div><div class="line">      beforeCreate() &#123; <span class="comment">// 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它</span></div><div class="line">        <span class="comment">// 注意： 在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化</span></div><div class="line">      &#125;,</div><div class="line">      created() &#123; <span class="comment">// 这是遇到的第二个生命周期函数</span></div><div class="line">        <span class="comment">//  在 created 中，data 和 methods 都已经被初始化好了！</span></div><div class="line">        <span class="comment">// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作</span></div><div class="line">      &#125;,</div><div class="line">      beforeMount() &#123; <span class="comment">// 这是遇到的第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中</span></div><div class="line">        <span class="comment">// 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串</span></div><div class="line">      &#125;,</div><div class="line">      mounted() &#123; <span class="comment">// 这是遇到的第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了</span></div><div class="line">        <span class="comment">// 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动</span></div><div class="line">      &#125;,</div><div class="line"></div><div class="line"></div><div class="line">      <span class="comment">// 接下来的3是运行中的两个事件</span></div><div class="line">      beforeUpdate() &#123; <span class="comment">// 这时候，表示 我们的界面还没有被更新【数据被更新了吗？  数据肯定被更新了】</span></div><div class="line">        <span class="comment">// 得出结论： 当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步</span></div><div class="line">      &#125;,</div><div class="line">      updated() &#123;</div><div class="line">        <span class="comment">// updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的</span></div><div class="line">      &#125;</div><div class="line">    &#125;);</div></pre></td></tr></table></figure></p>
<h2 id="vue-resource数据请求"><a href="#vue-resource数据请求" class="headerlink" title="vue-resource数据请求"></a>vue-resource数据请求</h2><p>读完下面的代码就会用啦</p>
<p>Vue.http.options.root = ‘<a href="http://vue.studyit.io/" target="_blank" rel="external">http://vue.studyit.io/</a>‘; 配置共有的请求部分</p>
<p>注意： 通过 result.body 拿到服务器返回的成功的数据</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意  --&gt;</span></div><div class="line">  <span class="comment">&lt;!-- this.$http.jsonp --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-resource-1.3.4.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"get请求"</span> @<span class="attr">click</span>=<span class="string">"getInfo"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"post请求"</span> @<span class="attr">click</span>=<span class="string">"postInfo"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"jsonp请求"</span> @<span class="attr">click</span>=<span class="string">"jsonpInfo"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="javascript">        getInfo() &#123; <span class="comment">// 发起get请求 只有一个参数  传递参数的话 使用/参数 进行拼接 因为后台有占位符</span></span></div><div class="line"><span class="javascript">          <span class="comment">//'http://vue.studyit.io/api/getlunbo/参数'</span></span></div><div class="line"><span class="javascript">          <span class="comment">//  当发起get请求之后， 通过 .then 来设置成功的回调函数</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.$http.get(<span class="string">'http://vue.studyit.io/api/getlunbo'</span>).then(<span class="function"><span class="keyword">function</span> (<span class="params">result</span>) </span>&#123;</span></div><div class="line"><span class="javascript">            <span class="comment">// 通过 result.body 拿到服务器返回的成功的数据</span></span></div><div class="line"><span class="undefined">          &#125;)</span></div><div class="line"><span class="undefined">        &#125;,</span></div><div class="line"><span class="javascript">        postInfo() &#123; <span class="comment">// 发起 post 请求   application/x-wwww-form-urlencoded</span></span></div><div class="line"><span class="javascript">          <span class="comment">//  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了</span></span></div><div class="line"><span class="javascript">          <span class="comment">//  通过 post 方法的第三个参数， &#123; emulateJSON: true &#125; 设置 提交的内容类型 为 普通表单数据格式</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.$http.post(<span class="string">'http://vue.studyit.io/api/post'</span>, &#123;&#125;, &#123; <span class="attr">emulateJSON</span>: <span class="literal">true</span> &#125;).then(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></div><div class="line"><span class="javascript">            <span class="built_in">console</span>.log(result.body)</span></div><div class="line"><span class="undefined">          &#125;)</span></div><div class="line"><span class="undefined">        &#125;,</span></div><div class="line"><span class="javascript">        jsonpInfo() &#123; <span class="comment">// 发起JSONP 请求 只有一个参数</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.$http.jsonp(<span class="string">'http://vue.studyit.io/api/jsonp'</span>).then(<span class="function"><span class="params">result</span> =&gt;</span> &#123;</span></div><div class="line"><span class="javascript">            <span class="built_in">console</span>.log(result.body)</span></div><div class="line"><span class="undefined">          &#125;)</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="vue提供的标签"><a href="#vue提供的标签" class="headerlink" title="vue提供的标签"></a>vue提供的标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!-- 总结:当前学习了几个 Vue 提供的标签了??? --&gt;</span></div><div class="line"><span class="comment">&lt;!-- component,  template,  transition,  transitionGroup  --&gt;</span></div></pre></td></tr></table></figure>
<h2 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h2><p>显示隐藏 添加删除 都会触发动画</p>
<h3 id="使用过渡类名实现动画"><a href="#使用过渡类名实现动画" class="headerlink" title="使用过渡类名实现动画"></a>使用过渡类名实现动画</h3><p>在进入/离开的过渡中，会有 6 个 class 切换。</p>
<ol>
<li><code>v-enter</code>：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。</li>
<li><code>v-enter-active</code>：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 <code>transition/animation</code> 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。</li>
<li><code>v-enter-to</code>: <strong>2.1.8版及以上</strong> 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 <code>v-enter</code> 被删除)，在 <code>transition/animation</code> 完成之后移除。</li>
<li><code>v-leave</code>: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。</li>
<li><code>v-leave-active</code>：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 <code>transition/animation</code> 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。</li>
<li><code>v-leave-to</code>: <strong>2.1.8版及以上</strong> 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 <code>v-leave</code> 被删除)，在 <code>transition/animation</code> 完成之后移除。</li>
</ol>
<p>具体使用方法看如下代码</p>
<ol>
<li>可以使用 name=’my’ 修改  .v-enter .v-leave-to  等样式的 v-前缀</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">'my'</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">    /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */</span></div><div class="line"><span class="undefined">    /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */</span></div><div class="line"><span class="undefined">    .v-enter,</span></div><div class="line"><span class="undefined">    .v-leave-to &#123;</span></div><div class="line"><span class="undefined">      opacity: 0;</span></div><div class="line"><span class="undefined">      transform: translateX(150px);</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    /* v-enter-active 【入场动画的时间段】 */</span></div><div class="line"><span class="undefined">    /* v-leave-active 【离场动画的时间段】 */</span></div><div class="line"><span class="undefined">    .v-enter-active,</span></div><div class="line"><span class="undefined">    .v-leave-active&#123;</span></div><div class="line"><span class="undefined">      transition: all 0.8s ease;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></div><div class="line">    </div><div class="line">    <span class="comment">&lt;!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- transition 元素，是 Vue 官方提供的 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">transition</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></div><div class="line">    </div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        flag: <span class="literal">false</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="使用第三方类实现动画"><a href="#使用第三方类实现动画" class="headerlink" title="使用第三方类实现动画"></a>使用第三方类实现动画</h3><p>注意：要引入 animate.css</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"./lib/animate.css"</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 入场 bounceIn    离场 bounceOut --&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"toggle"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 --&gt;</span></div><div class="line">    </div><div class="line">    <span class="comment">&lt;!-- 基本使用 --&gt;</span></div><div class="line">    <span class="comment">&lt;!--&lt;transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut"&gt;</span></div><div class="line"><span class="comment">      &lt;h3 v-if="flag"&gt;这是一个H3&lt;/h3&gt;</span></div><div class="line"><span class="comment">    &lt;/transition&gt;--&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 进化： 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 注意需要有 animate 可以跟动画写在一起，也可以跟要进行动画的元素写在一起 使用class="animated" --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- &lt;transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200"&gt;</span></div><div class="line"><span class="comment">      &lt;h3 v-if="flag" class="animated"&gt;这是一个H3&lt;/h3&gt;</span></div><div class="line"><span class="comment">    &lt;/transition&gt; --&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 在进化： 使用  :duration="&#123; enter: 200, leave: 400 &#125;"  来分别设置 入场的时长 和 离场的时长  --&gt;</span></div><div class="line">   <span class="tag">&lt;<span class="name">transition</span> </span></div><div class="line"><span class="tag">    <span class="attr">enter-active-class</span>=<span class="string">"bounceIn"</span> </span></div><div class="line"><span class="tag">    <span class="attr">leave-active-class</span>=<span class="string">"bounceOut"</span> </span></div><div class="line"><span class="tag">    <span class="attr">:duration</span>=<span class="string">"&#123; enter: 200, leave: 400 &#125;"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">h3</span> <span class="attr">v-if</span>=<span class="string">"flag"</span> <span class="attr">class</span>=<span class="string">"animated"</span>&gt;</span>这是一个H3<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        flag: <span class="literal">false</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="使用钩子函数模拟小球动画"><a href="#使用钩子函数模拟小球动画" class="headerlink" title="使用钩子函数模拟小球动画"></a>使用钩子函数模拟小球动画</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"> </span></div><div class="line"><span class="undefined">    .ball &#123;  /*小球样式*/</span></div><div class="line"><span class="undefined">      width: 15px;</span></div><div class="line"><span class="undefined">      height: 15px;</span></div><div class="line"><span class="undefined">      border-radius: 50%;</span></div><div class="line"><span class="undefined">      background-color: red;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"快到碗里来"</span> @<span class="attr">click</span>=<span class="string">"flag=!flag"</span>&gt;</span></div><div class="line">    </div><div class="line">    <span class="comment">&lt;!-- 1. 使用 transition 元素把 小球包裹起来 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 注意：三个事件必须写 方法在下面的methods中定义--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">transition</span></span></div><div class="line"><span class="tag">      @<span class="attr">before-enter</span>=<span class="string">"beforeEnter"</span></span></div><div class="line"><span class="tag">      @<span class="attr">enter</span>=<span class="string">"enter"</span></span></div><div class="line"><span class="tag">      @<span class="attr">after-enter</span>=<span class="string">"afterEnter"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"ball"</span> <span class="attr">v-show</span>=<span class="string">"flag"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        flag: <span class="literal">false</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        </span></div><div class="line"><span class="javascript">        <span class="comment">// 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象</span></span></div><div class="line"><span class="javascript">        <span class="comment">// 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象</span></span></div><div class="line"><span class="undefined">        </span></div><div class="line"><span class="undefined">        beforeEnter(el)&#123;</span></div><div class="line"><span class="javascript">          <span class="comment">// beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式</span></span></div><div class="line"><span class="javascript">          <span class="comment">// 设置小球开始动画之前的，起始位置</span></span></div><div class="line"><span class="javascript">          el.style.transform = <span class="string">"translate(0, 0)"</span></span></div><div class="line"><span class="undefined">        &#125;,</span></div><div class="line"><span class="undefined">        enter(el, done)&#123;</span></div><div class="line"><span class="javascript">           <span class="comment">// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态</span></span></div><div class="line"><span class="undefined">          </span></div><div class="line"><span class="javascript">          <span class="comment">// 这句话，没有实际的作用，但是，如果不写，出不来动画效果；</span></span></div><div class="line"><span class="javascript">          <span class="comment">// 可以认为 el.offsetWidth 会强制动画刷新</span></span></div><div class="line"><span class="undefined">          el.offsetWidth</span></div><div class="line"><span class="undefined">                 </span></div><div class="line"><span class="javascript">          el.style.transform = <span class="string">"translate(150px, 450px)"</span></span></div><div class="line"><span class="javascript">          el.style.transition = <span class="string">'all 1s ease'</span></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">          <span class="comment">// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用</span></span></div><div class="line"><span class="undefined">          done()</span></div><div class="line"><span class="undefined">        &#125;,</span></div><div class="line"><span class="undefined">        afterEnter(el)&#123;</span></div><div class="line"><span class="javascript">          <span class="comment">// 动画完成之后，会调用 afterEnter</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.flag = !<span class="keyword">this</span>.flag</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="列表动画"><a href="#列表动画" class="headerlink" title="列表动画"></a>列表动画</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">    li &#123;</span></div><div class="line"><span class="undefined">      border: 1px dashed #999;</span></div><div class="line"><span class="undefined">      margin: 5px;</span></div><div class="line"><span class="undefined">      line-height: 35px;</span></div><div class="line"><span class="undefined">      padding-left: 5px;</span></div><div class="line"><span class="undefined">      font-size: 12px;</span></div><div class="line"><span class="undefined">      width: 100%;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    li:hover &#123;</span></div><div class="line"><span class="undefined">      background-color: hotpink;</span></div><div class="line"><span class="undefined">      transition: all 0.8s ease;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .v-enter,</span></div><div class="line"><span class="undefined">    .v-leave-to &#123;</span></div><div class="line"><span class="undefined">      opacity: 0;</span></div><div class="line"><span class="undefined">      transform: translateY(80px);</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .v-enter-active,</span></div><div class="line"><span class="undefined">    .v-leave-active &#123;</span></div><div class="line"><span class="undefined">      transition: all 0.6s ease;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果及当这个元素前面的那个元素消失了，他会向上补，但是会慢慢的飘上来 而不是一下子就跳上来*/</span></div><div class="line"><span class="undefined">    .v-move &#123;</span></div><div class="line"><span class="undefined">      transition: all 0.6s ease;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined">    .v-leave-active&#123;</span></div><div class="line"><span class="undefined">      position: absolute;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></div><div class="line">        Id:</div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"id"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line"></div><div class="line">      <span class="tag">&lt;<span class="name">label</span>&gt;</span></div><div class="line">        Name:</div><div class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"name"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">label</span>&gt;</span></div><div class="line"></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"添加"</span> @<span class="attr">click</span>=<span class="string">"add"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">      <span class="comment">&lt;!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup --&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 --&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 --&gt;</span></div><div class="line">      <span class="comment">&lt;!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">transition-group</span> <span class="attr">appear</span> <span class="attr">tag</span>=<span class="string">"ul"</span>&gt;</span></div><div class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">v-for</span>=<span class="string">"(item, i) in list"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span> @<span class="attr">click</span>=<span class="string">"del(i)"</span>&gt;</span></div><div class="line">          &#123;&#123;item.id&#125;&#125; --- &#123;&#123;item.name&#125;&#125;</div><div class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">      <span class="tag">&lt;/<span class="name">transition-group</span>&gt;</span></div><div class="line"></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        id: <span class="string">''</span>,</span></div><div class="line"><span class="javascript">        name: <span class="string">''</span>,</span></div><div class="line"><span class="undefined">        list: [</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">1</span>, <span class="attr">name</span>: <span class="string">'赵高'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">2</span>, <span class="attr">name</span>: <span class="string">'秦桧'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">3</span>, <span class="attr">name</span>: <span class="string">'严嵩'</span> &#125;,</span></div><div class="line"><span class="javascript">          &#123; <span class="attr">id</span>: <span class="number">4</span>, <span class="attr">name</span>: <span class="string">'魏忠贤'</span> &#125;</span></div><div class="line"><span class="undefined">        ]</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        add() &#123;</span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.list.push(&#123; <span class="attr">id</span>: <span class="keyword">this</span>.id, <span class="attr">name</span>: <span class="keyword">this</span>.name &#125;)</span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.id = <span class="keyword">this</span>.name = <span class="string">''</span></span></div><div class="line"><span class="undefined">        &#125;,</span></div><div class="line"><span class="undefined">        del(i) &#123;</span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.list.splice(i, <span class="number">1</span>)</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><p>组件的使用：如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可</p>
<p>注意：</p>
<ol>
<li>不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素</li>
<li>如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接</li>
<li>如果不使用驼峰,则直接拿名称来使用即可</li>
</ol>
<h3 id="公有组件"><a href="#公有组件" class="headerlink" title="公有组件"></a>公有组件</h3><p>组件创建方式一：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 1.1 使用 Vue.extend 来创建全局的Vue组件</span></span></div><div class="line"><span class="javascript">    <span class="comment">// var com1 = Vue.extend(&#123;</span></span></div><div class="line"><span class="xml">    //   template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>这是使用 Vue.extend 创建的组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>' // 通过 template 属性，指定了组件要展示的HTML结构</span></div><div class="line"><span class="javascript">    <span class="comment">// &#125;)</span></span></div><div class="line"><span class="undefined">  </span></div><div class="line"><span class="javascript">    <span class="comment">// 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)</span></span></div><div class="line"><span class="javascript">    <span class="comment">// Vue.component('myCom1', com1)</span></span></div><div class="line"><span class="undefined">  </span></div><div class="line"><span class="javascript">    <span class="comment">// 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；</span></span></div><div class="line"><span class="javascript">    <span class="comment">// 如果不使用驼峰,则直接拿名称来使用即可;</span></span></div><div class="line"><span class="javascript">    <span class="comment">// Vue.component('mycom1', com1)</span></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的</span></span></div><div class="line"><span class="javascript">    <span class="comment">// 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容</span></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'mycom1'</span>, Vue.extend(&#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>这是使用 Vue.extend 创建的组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;))</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>组件创建方式二</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'mycom2'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;<span class="name">h3</span>&gt;</span>这是直接使用 Vue.component 创建出来的组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>123<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p>组件创建方式三</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">mycom3</span>&gt;</span><span class="tag">&lt;/<span class="name">mycom3</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- &lt;login&gt;&lt;/login&gt; --&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  </div><div class="line">  <span class="comment">&lt;!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">h4</span>&gt;</span>好用,不错!<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line">  </div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'mycom3'</span>, &#123;</span></div><div class="line"><span class="javascript">      template: <span class="string">'#tmpl'</span></span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="私有组件"><a href="#私有组件" class="headerlink" title="私有组件"></a>私有组件</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">login</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="comment">&lt;!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  --&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是私有的 login 组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm2 = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="javascript">      components: &#123; <span class="comment">// 定义实例内部私有组件的</span></span></div><div class="line"><span class="undefined">        login: &#123;</span></div><div class="line"><span class="javascript">          template: <span class="string">'#tmpl'</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="组件中的data和methods"><a href="#组件中的data和methods" class="headerlink" title="组件中的data和methods"></a>组件中的data和methods</h3><ol>
<li>组件可以有自己的 data 数据<ol>
<li>组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法</li>
</ol>
</li>
<li>组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个<strong>对象</strong>才行;</li>
<li>组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!</li>
<li>组件中 的methods数据,使用方式,和实例中的 methods使用方式完全一样!!!</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">mycom1</span>&gt;</span><span class="tag">&lt;/<span class="name">mycom1</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></div><div class="line">  	<span class="tag">&lt;<span class="name">h1</span> @<span class="attr">click</span>=<span class="string">"change"</span>&gt;</span>这是全局组件 --- &#123;&#123;msg&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">    </span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'mycom1'</span>, &#123;</span></div><div class="line"><span class="javascript">      template: <span class="string">"#tmpl"</span>,</span></div><div class="line"><span class="javascript">      data: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></div><div class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></div><div class="line"><span class="javascript">          msg: <span class="string">'这是组件的中data定义的数据'</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods:&#123;</span></div><div class="line"><span class="undefined">        change()&#123;</span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.msg=<span class="string">'改变了'</span>;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="组件切换方式"><a href="#组件切换方式" class="headerlink" title="组件切换方式"></a>组件切换方式</h3><p>方式一</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"flag=true"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"flag=false"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">login</span> <span class="attr">v-if</span>=<span class="string">"flag"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">register</span> <span class="attr">v-else</span>=<span class="string">"flag"</span>&gt;</span><span class="tag">&lt;/<span class="name">register</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'login'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'register'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        flag: <span class="literal">false</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p>方式二</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='login'"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='register'"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- Vue提供了 component ,来展示对应名称的组件 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"comName"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 总结:当前学习了几个 Vue 提供的标签了??? --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- component,  template,  transition,  transitionGroup  --&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 组件名称是 字符串</span></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'login'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'register'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        comName: <span class="string">'login'</span> <span class="comment">// 当前 component 中的 :is 绑定的组件的名称</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="组件之间的切换动画"><a href="#组件之间的切换动画" class="headerlink" title="组件之间的切换动画"></a>组件之间的切换动画</h3><p><code>mode=&quot;out-in&quot;</code>   作用设置组件切换的方式，这个表示当前组件先离开了以后，另一个组件在进来，与之相反的还有 mode=”in-out” </p>
<p><code>:is=&quot;comName&quot;</code>   设置要显示组件的名字</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">    .v-enter,</span></div><div class="line"><span class="undefined">    .v-leave-to &#123;</span></div><div class="line"><span class="undefined">      opacity: 0;</span></div><div class="line"><span class="undefined">      transform: translateX(150px);</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .v-enter-active,</span></div><div class="line"><span class="undefined">    .v-leave-active &#123;</span></div><div class="line"><span class="undefined">      transition: all 0.5s ease;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='login'"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">""</span> @<span class="attr">click.prevent</span>=<span class="string">"comName='register'"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 通过 mode 属性,设置组件切换时候的 模式 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">transition</span> <span class="attr">mode</span>=<span class="string">"out-in"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">component</span> <span class="attr">:is</span>=<span class="string">"comName"</span>&gt;</span><span class="tag">&lt;/<span class="name">component</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 组件名称是 字符串</span></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'login'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    Vue.component(<span class="string">'register'</span>, &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        comName: <span class="string">'login'</span> <span class="comment">// 当前 component 中的 :is 绑定的组件的名称</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="组件之间的传值-方法（父—-gt-子）"><a href="#组件之间的传值-方法（父—-gt-子）" class="headerlink" title="组件之间的传值/方法（父—&gt;子）"></a>组件之间的传值/方法（父—&gt;子）</h3><ul>
<li>传值</li>
</ul>
<ol>
<li>父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用</li>
<li>经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法</li>
<li>子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上</li>
<li>data 上的数据，都是可读可写的，  props 中的数据及父组件中的数组，都是只读的，无法重新赋值</li>
<li>组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的，把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据</li>
</ol>
<p>使用父组件传的值：</p>
<ol>
<li>通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">com1</span> <span class="attr">v-bind:parentmsg</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">com1</span>&gt;</span></div></pre></td></tr></table></figure>
<ol>
<li>把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">props: [<span class="string">'parentmsg'</span>]</div></pre></td></tr></table></figure>
<p>全部的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">com1</span> <span class="attr">v-bind:parentmsg</span>=<span class="string">"msg"</span>&gt;</span><span class="tag">&lt;/<span class="name">com1</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        msg: <span class="string">'123 啊-父组件中的数据'</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      components: &#123;</span></div><div class="line"><span class="javascript">        <span class="comment">// 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法</span></span></div><div class="line"><span class="undefined">        com1: &#123;</span></div><div class="line"><span class="undefined">          data() &#123; </span></div><div class="line"><span class="javascript">            <span class="comment">// data 上的数据，都是可读可写的；</span></span></div><div class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></div><div class="line"><span class="javascript">              title: <span class="string">'123'</span>,</span></div><div class="line"><span class="javascript">              content: <span class="string">'qqq'</span></span></div><div class="line"><span class="undefined">            &#125;</span></div><div class="line"><span class="undefined">          &#125;,</span></div><div class="line"><span class="xml">          template: '<span class="tag">&lt;<span class="name">h1</span> @<span class="attr">click</span>=<span class="string">"change"</span>&gt;</span>这是子组件 --- &#123;&#123; parentmsg &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></div><div class="line"><span class="javascript">          <span class="comment">// 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的</span></span></div><div class="line"><span class="javascript">          <span class="comment">// props 中的数据，都是只读的，无法重新赋值</span></span></div><div class="line"><span class="javascript">          props: [<span class="string">'parentmsg'</span>], <span class="comment">// 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据</span></span></div><div class="line"><span class="undefined">          methods: &#123;</span></div><div class="line"><span class="undefined">            change() &#123;</span></div><div class="line"><span class="javascript">              <span class="keyword">this</span>.parentmsg = <span class="string">'被修改了'</span></span></div><div class="line"><span class="undefined">            &#125;</span></div><div class="line"><span class="undefined">          &#125;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<ul>
<li>传方法</li>
</ul>
<ol>
<li>父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了    func自己定义的名字 随便写     show 父组件中的方法</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">com2</span> @<span class="attr">func</span>=<span class="string">"show"</span>&gt;</span><span class="tag">&lt;/<span class="name">com2</span>&gt;</span></div></pre></td></tr></table></figure>
<ol>
<li>通过 this.$emit.方法  来调用 emit 英文原意： 是触发，调用、发射的意思</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//this.sonmsg 传递的参数   如果需要两个参数可以这样写  this.$emit('func', 参数1，参数2)  需要多个以此类推</span></div><div class="line"><span class="keyword">this</span>.$emit(<span class="string">'func'</span>, <span class="keyword">this</span>.sonmsg)</div></pre></td></tr></table></figure>
<p>全部代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">com2</span> @<span class="attr">func</span>=<span class="string">"show"</span>&gt;</span><span class="tag">&lt;/<span class="name">com2</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是 子组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法"</span> @<span class="attr">click</span>=<span class="string">"myclick"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 定义了一个字面量类型的 组件模板对象</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> com2 = &#123;</span></div><div class="line"><span class="javascript">      template: <span class="string">'#tmpl'</span>, <span class="comment">// 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构</span></span></div><div class="line"><span class="undefined">      data() &#123;</span></div><div class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></div><div class="line"><span class="javascript">          sonmsg: &#123; <span class="attr">name</span>: <span class="string">'小头儿子'</span>, <span class="attr">age</span>: <span class="number">6</span> &#125;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        myclick() &#123;</span></div><div class="line"><span class="javascript">          <span class="comment">// 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？</span></span></div><div class="line"><span class="javascript">          <span class="comment">//  emit 英文原意： 是触发，调用、发射的意思</span></span></div><div class="line"><span class="javascript">          <span class="comment">// this.$emit('func123', 123, 456)</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.$emit(<span class="string">'func'</span>, <span class="keyword">this</span>.sonmsg)</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        datamsgFormSon: <span class="literal">null</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        show(data) &#123;</span></div><div class="line"><span class="javascript">          <span class="comment">// console.log('调用了父组件身上的 show 方法: --- ' + data)</span></span></div><div class="line"><span class="javascript">          <span class="keyword">this</span>.datamsgFormSon = data</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      components: &#123;</span></div><div class="line"><span class="javascript">        com2  <span class="comment">//es6简写 相当于 com2: com2</span></span></div><div class="line"><span class="undefined">        </span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p>##render渲染组件</p>
<p>render函数中return的页面会把app页面换掉</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>444444<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是登录组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="javascript">      render: <span class="function"><span class="keyword">function</span> (<span class="params">createElements</span>) </span>&#123; <span class="comment">// createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构</span></span></div><div class="line"><span class="javascript">        <span class="keyword">return</span> createElements(login)</span></div><div class="line"><span class="javascript">        <span class="comment">// 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器</span></span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="ref获取DOM元素和组件"><a href="#ref获取DOM元素和组件" class="headerlink" title="ref获取DOM元素和组件"></a>ref获取DOM元素和组件</h2><ul>
<li>使用：</li>
</ul>
<ol>
<li>在元素或组件身上写下 ref 属性,   属性值自己定义，随便写</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">&lt;!--DOM元素--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">"myh3"</span> <span class="attr">ref</span>=<span class="string">"myh3"</span>&gt;</span>哈哈哈， 今天天气太好了！！！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line"><span class="comment">&lt;!--组件--&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">login</span> <span class="attr">ref</span>=<span class="string">"mylogin"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></div></pre></td></tr></table></figure>
<ol>
<li>调用$refs获取到DOM元素或组件   myh3 和 mylogin 是上面 ref 属性所对应的值</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//DOM元素</span></div><div class="line"><span class="keyword">this</span>.$refs.myh3</div><div class="line"><span class="comment">//组件</span></div><div class="line"><span class="keyword">this</span>.$refs.mylogin</div></pre></td></tr></table></figure>
<p>全部代码:</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"获取元素"</span> @<span class="attr">click</span>=<span class="string">"getElement"</span> <span class="attr">ref</span>=<span class="string">"mybtn"</span>&gt;</span></div><div class="line">     <span class="comment">&lt;!--DOM元素--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">"myh3"</span> <span class="attr">ref</span>=<span class="string">"myh3"</span>&gt;</span>哈哈哈， 今天天气太好了！！！<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">hr</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!--组件--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">login</span> <span class="attr">ref</span>=<span class="string">"mylogin"</span>&gt;</span><span class="tag">&lt;/<span class="name">login</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></div><div class="line"><span class="undefined">      data() &#123;</span></div><div class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></div><div class="line"><span class="javascript">          msg: <span class="string">'son msg'</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        show() &#123;</span></div><div class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'调用了子组件的方法'</span>)</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;</span></div><div class="line"><span class="undefined">        getElement() &#123;</span></div><div class="line"><span class="javascript">          <span class="comment">//  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError</span></span></div><div class="line"><span class="javascript">          <span class="comment">// console.log(this.$refs.myh3.innerText)</span></span></div><div class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="keyword">this</span>.$refs.mylogin.msg)</span></div><div class="line"><span class="javascript">          <span class="comment">// this.$refs.mylogin.show()</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      components: &#123;</span></div><div class="line"><span class="javascript">        login  <span class="comment">//es6简写  相当于 login:login</span></span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="Vue-中路由-vue-router"><a href="#Vue-中路由-vue-router" class="headerlink" title="Vue 中路由 vue-router"></a>Vue 中路由 vue-router</h2><h3 id="基本使用："><a href="#基本使用：" class="headerlink" title="基本使用："></a>基本使用：</h3><ol>
<li>引包</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="comment">&lt;!-- 1. 安装 vue-router 路由模块  vue也要引入 基于vue --&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<ol>
<li>创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> routerObj = <span class="keyword">new</span> VueRouter(&#123;</div><div class="line">      <span class="comment">// route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思</span></div><div class="line">      routes: [ <span class="comment">// 路由匹配规则 </span></div><div class="line">        <span class="comment">//  每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：</span></div><div class="line">        <span class="comment">//  属性1 是 path， 表示监听 哪个路由链接地址；</span></div><div class="line">        <span class="comment">//  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件</span></div><div class="line">        <span class="comment">//  注意： component 的属性值，必须是一个 组件的模板对象， 不能是组件的引用名称,就是使用组件时的标签名；</span></div><div class="line">        </div><div class="line">        &#123; <span class="attr">path</span>: <span class="string">'/'</span>, <span class="attr">redirect</span>: <span class="string">'/login'</span> &#125;, <span class="comment">// 意思是当路径是'/'就跳转到'/login'</span></div><div class="line">        &#123; <span class="attr">path</span>: <span class="string">'/login'</span>, <span class="attr">component</span>: login &#125;,</div><div class="line">        &#123; <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: register &#125;</div><div class="line">      ],</div><div class="line">      linkActiveClass: <span class="string">'myactive'</span></div><div class="line">    &#125;)</div></pre></td></tr></table></figure>
<ol>
<li>将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</div><div class="line">     el: <span class="string">'#app'</span>,</div><div class="line">     data: &#123;&#125;,</div><div class="line">     methods: &#123;&#125;,</div><div class="line">     router: routerObj <span class="comment">// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件</span></div><div class="line">   &#125;);</div></pre></td></tr></table></figure>
<p> router-link     默认渲染为一个a 标签，作用相当于一个a标签，用来实现 url 地址的改变，进行跳转，可以使用 tag 修改默认的渲染标签</p>
<p> router-view      组件渲染地方</p>
<p> linkActiveClass: ‘myactive’    作用 —修改router-link 标签渲染出来的默认 class  ，默认值是 router-link-active</p>
<p>全部代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- &lt;a href="#/login"&gt;登录&lt;/a&gt; --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- &lt;a href="#/register"&gt;注册&lt;/a&gt; --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- router-link 默认渲染为一个a 标签 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login"</span> <span class="attr">tag</span>=<span class="string">"span"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">    </div><div class="line">    <span class="comment">&lt;!-- 这是 vue-router 提供的元素，专门用来 当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个 router-view 中去 --&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 所以： 我们可以把 router-view 认为是一个占位符 --&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 组件的模板对象</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> register = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter</span></span></div><div class="line"><span class="javascript">    <span class="comment">// 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> routerObj = <span class="keyword">new</span> VueRouter(&#123;</span></div><div class="line"><span class="undefined">      </span></div><div class="line"><span class="javascript">      <span class="comment">// route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思</span></span></div><div class="line"><span class="javascript">      routes: [ <span class="comment">// 路由匹配规则  </span></span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/'</span>, <span class="attr">redirect</span>: <span class="string">'/login'</span> &#125;,</span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/login'</span>, <span class="attr">component</span>: login &#125;,</span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: register &#125;</span></div><div class="line"><span class="undefined">      ],</span></div><div class="line"><span class="javascript">      linkActiveClass: <span class="string">'myactive'</span></span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="javascript">      router: routerObj <span class="comment">// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件</span></span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="路由传参"><a href="#路由传参" class="headerlink" title="路由传参"></a>路由传参</h3><p><strong>方式一</strong></p>
<p>如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login?id=10&amp;name=zs"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div></pre></td></tr></table></figure>
<p>获取传递的参数 使用 this.$route   使用？拼接的方式传递的参数在  query属性里</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">this</span>.$route.query <span class="comment">//得到的是获取到的参数</span></div><div class="line"><span class="keyword">this</span>.$route.query.path   <span class="comment">///获取到的是路径  "/login"</span></div><div class="line"><span class="keyword">this</span>.$route.query.fullPath   <span class="comment">//获取到的是路径  "/login?id=10&amp;name=zs"</span></div></pre></td></tr></table></figure>
<p>代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="comment">&lt;!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login?id=10&amp;name=zs"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录 --- &#123;&#123; $route.query.id &#125;&#125; --- &#123;&#123; $route.query.name &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></div><div class="line"><span class="undefined">      data()&#123;</span></div><div class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></div><div class="line"><span class="javascript">          msg: <span class="string">'123'</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="javascript">      created()&#123; <span class="comment">// 组件的生命周期钩子函数</span></span></div><div class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.$route)</span></div><div class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.$route.query.id)</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> register = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></div><div class="line"><span class="undefined">      routes: [</span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/login'</span>, <span class="attr">component</span>: login &#125;,</span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: register &#125;</span></div><div class="line"><span class="undefined">      ]</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="javascript">      <span class="comment">// router: router</span></span></div><div class="line"><span class="undefined">      router</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<p><strong>方式二</strong>  占位符的方式</p>
<p>如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login/12/ls"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div></pre></td></tr></table></figure>
<p>需要在路由配置项的path 中写下占位符<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</div><div class="line">     routes: [</div><div class="line">       &#123; <span class="attr">path</span>: <span class="string">'/login/:id/:name'</span>, <span class="attr">component</span>: login &#125;,</div><div class="line">       &#123; <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: register &#125;</div><div class="line">     ]</div><div class="line">   &#125;)</div></pre></td></tr></table></figure></p>
<p>获取传递的参数 使用 this.$route   使用？拼接的方式传递的参数在  query属性里</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">this</span>.$route.query <span class="comment">//得到的是获取到的参数</span></div><div class="line"><span class="keyword">this</span>.$route.query.path   <span class="comment">///获取到的是路径  "/login"</span></div><div class="line"><span class="keyword">this</span>.$route.query.fullPath   <span class="comment">//获取到的是路径  "/login?id=10&amp;name=zs"</span></div></pre></td></tr></table></figure>
<p>代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line">    <span class="comment">&lt;!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 --&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/login/12/ls"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>登录 --- &#123;&#123; $route.params.id &#125;&#125; --- &#123;&#123; $route.params.name &#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>',</span></div><div class="line"><span class="undefined">      data()&#123;</span></div><div class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></div><div class="line"><span class="javascript">          msg: <span class="string">'123'</span></span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="javascript">      created()&#123; <span class="comment">// 组件的生命周期钩子函数</span></span></div><div class="line"><span class="javascript">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.$route.params.id)</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> register = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></div><div class="line"><span class="undefined">      routes: [</span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/login/:id/:name'</span>, <span class="attr">component</span>: login &#125;,</span></div><div class="line"><span class="javascript">        &#123; <span class="attr">path</span>: <span class="string">'/register'</span>, <span class="attr">component</span>: register &#125;</span></div><div class="line"><span class="undefined">      ]</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="javascript">      <span class="comment">// router: router</span></span></div><div class="line"><span class="undefined">      router</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="路由嵌套"><a href="#路由嵌套" class="headerlink" title="路由嵌套"></a>路由嵌套</h3><p>一个路由里面套着一个路由</p>
<p>注意：</p>
<p>使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</div><div class="line">      routes: [</div><div class="line">        &#123;</div><div class="line">          path: <span class="string">'/account'</span>,</div><div class="line">          component: account,</div><div class="line">          <span class="comment">// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址</span></div><div class="line">          children: [</div><div class="line">            &#123; <span class="attr">path</span>: <span class="string">'login'</span>, <span class="attr">component</span>: login &#125;,</div><div class="line">            &#123; <span class="attr">path</span>: <span class="string">'register'</span>, <span class="attr">component</span>: register &#125;</div><div class="line">          ]</div><div class="line">        &#125;</div><div class="line">      ]</div><div class="line">    &#125;)</div></pre></td></tr></table></figure>
<p>代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/account"</span>&gt;</span>Account<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">	<span class="comment">&lt;!--外面的--&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="comment">&lt;!--组件模板--&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">id</span>=<span class="string">"tmpl"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">h1</span>&gt;</span>这是 Account 组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/account/login"</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">router-link</span> <span class="attr">to</span>=<span class="string">"/account/register"</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">router-link</span>&gt;</span></div><div class="line">      <span class="comment">&lt;!--被嵌套的--&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 组件的模板对象</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> account = &#123;</span></div><div class="line"><span class="javascript">      template: <span class="string">'#tmpl'</span></span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>登录<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> register = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h3</span>&gt;</span>注册<span class="tag">&lt;/<span class="name">h3</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></div><div class="line"><span class="undefined">      routes: [</span></div><div class="line"><span class="undefined">        &#123;</span></div><div class="line"><span class="javascript">          path: <span class="string">'/account'</span>,</span></div><div class="line"><span class="undefined">          component: account,</span></div><div class="line"><span class="javascript">          <span class="comment">// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址</span></span></div><div class="line"><span class="undefined">          children: [</span></div><div class="line"><span class="javascript">            &#123; <span class="attr">path</span>: <span class="string">'login'</span>, <span class="attr">component</span>: login &#125;,</span></div><div class="line"><span class="javascript">            &#123; <span class="attr">path</span>: <span class="string">'register'</span>, <span class="attr">component</span>: register &#125;</span></div><div class="line"><span class="undefined">          ]</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      ]</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="undefined">      router</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div></pre></td></tr></table></figure>
<h3 id="命名视图实现经典布局"><a href="#命名视图实现经典布局" class="headerlink" title="命名视图实现经典布局"></a>命名视图实现经典布局</h3><ol>
<li>页面中多个router-view 用name标识出来</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">   <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></div><div class="line">     <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"left"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">     <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"main"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">   <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<ol>
<li>创建路由对象 配置routes</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</div><div class="line">      routes: [</div><div class="line">        &#123;</div><div class="line">          path: <span class="string">'/'</span>, <span class="attr">components</span>: &#123;</div><div class="line">            <span class="string">'default'</span>: header,  <span class="comment">//默认跳转</span></div><div class="line">            <span class="string">'left'</span>: leftBox,	<span class="comment">//渲染到name为left的router-view</span></div><div class="line">            <span class="string">'main'</span>: mainBox   	<span class="comment">//渲染到name为left的router-view</span></div><div class="line">          &#125;</div><div class="line">        &#125;</div><div class="line">      ]</div><div class="line">    &#125;)</div></pre></td></tr></table></figure>
<p>全部代码：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-2.4.0.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"./lib/vue-router-3.0.1.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">    html,</span></div><div class="line"><span class="undefined">    body &#123;</span></div><div class="line"><span class="undefined">      margin: 0;</span></div><div class="line"><span class="undefined">      padding: 0;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .header &#123;</span></div><div class="line"><span class="undefined">      background-color: orange;</span></div><div class="line"><span class="undefined">      height: 80px;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    h1 &#123;</span></div><div class="line"><span class="undefined">      margin: 0;</span></div><div class="line"><span class="undefined">      padding: 0;</span></div><div class="line"><span class="undefined">      font-size: 16px;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .container &#123;</span></div><div class="line"><span class="undefined">      display: flex;</span></div><div class="line"><span class="undefined">      height: 600px;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .left &#123;</span></div><div class="line"><span class="undefined">      background-color: lightgreen;</span></div><div class="line"><span class="undefined">      flex: 2;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="undefined">    .main &#123;</span></div><div class="line"><span class="undefined">      background-color: lightpink;</span></div><div class="line"><span class="undefined">      flex: 8;</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"left"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">router-view</span> <span class="attr">name</span>=<span class="string">"main"</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> header = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"header"</span>&gt;</span>Header头部区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> leftBox = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"left"</span>&gt;</span>Left侧边栏区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> mainBox = &#123;</span></div><div class="line"><span class="xml">      template: '<span class="tag">&lt;<span class="name">h1</span> <span class="attr">class</span>=<span class="string">"main"</span>&gt;</span>mainBox主体区域<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></div><div class="line"><span class="undefined">    &#125;</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建路由对象</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> router = <span class="keyword">new</span> VueRouter(&#123;</span></div><div class="line"><span class="undefined">      routes: [</span></div><div class="line"><span class="undefined">        &#123;</span></div><div class="line"><span class="javascript">          path: <span class="string">'/'</span>, <span class="attr">components</span>: &#123;</span></div><div class="line"><span class="javascript">            <span class="string">'default'</span>: header,</span></div><div class="line"><span class="javascript">            <span class="string">'left'</span>: leftBox,</span></div><div class="line"><span class="javascript">            <span class="string">'main'</span>: mainBox</span></div><div class="line"><span class="undefined">          &#125;</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      ]</span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;&#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="undefined">      router</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="数据监听-watch-、computed"><a href="#数据监听-watch-、computed" class="headerlink" title="数据监听 watch 、computed"></a>数据监听 watch 、computed</h2><p><strong>watch</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">   <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">   <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">     el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">     data: &#123;</span></div><div class="line"><span class="javascript">       firstname: <span class="string">''</span>,</span></div><div class="line"><span class="javascript">       lastname: <span class="string">''</span>,</span></div><div class="line"><span class="javascript">       fullname: <span class="string">''</span></span></div><div class="line"><span class="undefined">     &#125;,</span></div><div class="line"><span class="undefined">     methods: &#123;&#125;,</span></div><div class="line"><span class="javascript">     watch: &#123; <span class="comment">// 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数</span></span></div><div class="line"><span class="javascript">       <span class="comment">//newVal 变化之后的值</span></span></div><div class="line"><span class="javascript">       <span class="comment">//oldVal 变化之前的值</span></span></div><div class="line"><span class="javascript">       <span class="string">'firstname'</span>: <span class="function"><span class="keyword">function</span> (<span class="params">newVal, oldVal</span>) </span>&#123;</span></div><div class="line"><span class="javascript">         <span class="keyword">this</span>.fullname = newVal + <span class="string">'-'</span> + <span class="keyword">this</span>.lastname</span></div><div class="line"><span class="undefined">       &#125;,</span></div><div class="line"><span class="javascript">       <span class="string">'lastname'</span>: <span class="function"><span class="keyword">function</span> (<span class="params">newVal</span>) </span>&#123;</span></div><div class="line"><span class="javascript">         <span class="keyword">this</span>.fullname = <span class="keyword">this</span>.firstname + <span class="string">'-'</span> + newVal</span></div><div class="line"><span class="undefined">       &#125;</span></div><div class="line"><span class="undefined">     &#125;</span></div><div class="line"><span class="undefined">   &#125;);</span></div><div class="line"><span class="undefined"> </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<p><strong>computed</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div></pre></td><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"firstname"</span>&gt;</span> +</div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"middlename"</span>&gt;</span> +</div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"lastname"</span>&gt;</span> =</div><div class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"fullname"</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>&#123;&#123; fullname &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div><div class="line"></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="undefined">    </span></div><div class="line"><span class="javascript">    <span class="comment">// 创建 Vue 实例，得到 ViewModel</span></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></div><div class="line"><span class="javascript">      el: <span class="string">'#app'</span>,</span></div><div class="line"><span class="undefined">      data: &#123;</span></div><div class="line"><span class="javascript">        firstname: <span class="string">''</span>,</span></div><div class="line"><span class="javascript">        lastname: <span class="string">''</span>,</span></div><div class="line"><span class="javascript">        middlename: <span class="string">''</span></span></div><div class="line"><span class="undefined">      &#125;,</span></div><div class="line"><span class="undefined">      methods: &#123;&#125;,</span></div><div class="line"><span class="undefined">      computed: &#123; </span></div><div class="line"><span class="javascript">        <span class="comment">// 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；</span></span></div><div class="line"><span class="undefined"></span></div><div class="line"><span class="javascript">        <span class="comment">// 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；</span></span></div><div class="line"><span class="javascript">        <span class="comment">// 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值</span></span></div><div class="line"><span class="javascript">        <span class="comment">// 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；</span></span></div><div class="line"><span class="javascript">        <span class="string">'fullname'</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></div><div class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">'ok'</span>)</span></div><div class="line"><span class="javascript">          <span class="keyword">return</span> <span class="keyword">this</span>.firstname + <span class="string">'-'</span> + <span class="keyword">this</span>.middlename + <span class="string">'-'</span> + <span class="keyword">this</span>.lastname</span></div><div class="line"><span class="undefined">        &#125;</span></div><div class="line"><span class="undefined">      &#125;</span></div><div class="line"><span class="undefined">    &#125;);</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="Vuex的使用"><a href="#Vuex的使用" class="headerlink" title="Vuex的使用"></a>Vuex的使用</h2><p>第一步：配置安装 运行运行 cnpm i vuex -S </p>
<p>第二步：导入包</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">import</span> Vuex <span class="keyword">from</span> <span class="string">'vuex'</span></div></pre></td></tr></table></figure>
<p>第三步：注册vuex到vue中</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">Vue.use(Vuex)</div></pre></td></tr></table></figure>
<p>第四步：new Vuex.Store() 实例，得到一个 数据仓储对象</p>
<p>注意：</p>
<ol>
<li>state中的数据，不能直接修改，如果想要修改，必须通过 mutations</li>
<li>如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.<em>*</em></li>
<li>如果 组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit(‘方法的名称’， 唯一的一个参数)，如果想要传递多个参数，可以使用对象或者数组进行传递</li>
<li>如果 store 中 state 上的数据， 在对外提供的时候，需要做一层包装，那么 ，推荐使用 getters, 如果需要使用 getters ,则用 this.$store.getters.<em>*</em></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> store = <span class="keyword">new</span> Vuex.Store(&#123;</div><div class="line">  state: &#123;</div><div class="line">    <span class="comment">// 大家可以把 state 想象成 组件中的 data ,专门用来存储数据的</span></div><div class="line">    <span class="comment">// 如果在 组件中，想要访问，store 中的数据，只能通过 this.$store.state.*** 来访问</span></div><div class="line">    count: <span class="number">0</span></div><div class="line">  &#125;,</div><div class="line">  mutations: &#123;</div><div class="line">    <span class="comment">// 注意： 如果要操作 store 中的 state 值，只能通过 调用 mutations 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为 万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法；</span></div><div class="line">    increment(state) &#123;</div><div class="line">      state.count++</div><div class="line">    &#125;,</div><div class="line">    <span class="comment">// 注意： 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')</span></div><div class="line">    <span class="comment">// 这种 调用 mutations 方法的格式，和 this.$emit('父组件中方法名')</span></div><div class="line">    subtract(state, obj) &#123;</div><div class="line">      <span class="comment">// 注意： mutations 的 函数参数列表中，最多支持两个参数，其中，参数1： 是 state 状态； 参数2： 通过 commit 提交过来的参数；如果想要传递多个参数，可以使用对象或者数组进行传递</span></div><div class="line">      <span class="built_in">console</span>.log(obj)</div><div class="line">      state.count -= (obj.c + obj.d)</div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">  getters: &#123;</div><div class="line">    <span class="comment">// 注意：这里的 getters， 只负责 对外提供数据，不负责 修改数据，如果想要修改 state 中的数据，请 去找 mutations</span></div><div class="line">    optCount: <span class="function"><span class="keyword">function</span> (<span class="params">state</span>) </span>&#123;</div><div class="line">      <span class="keyword">return</span> <span class="string">'当前最新的count值是：'</span> + state.count</div><div class="line">    &#125;</div><div class="line">    <span class="comment">// 经过咱们回顾对比，发现 getters 中的方法， 和组件中的过滤器比较类似，因为 过滤器和 getters 都没有修改原数据， 都是把原数据做了一层包装，提供给了 调用者；</span></div><div class="line">    <span class="comment">// 其次， getters 也和 computed 比较像， 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>组件中的语法：修改组件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></td><td class="code"><pre><div class="line">&lt;template&gt;</div><div class="line">  &lt;div&gt;</div><div class="line">    &lt;input type=&quot;button&quot; value=&quot;减少&quot; @click=&quot;remove&quot;&gt;</div><div class="line">    &lt;input type=&quot;button&quot; value=&quot;增加&quot; @click=&quot;add&quot;&gt;</div><div class="line">    &lt;br&gt;</div><div class="line">    &lt;input type=&quot;text&quot; v-model=&quot;$store.state.count&quot;&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line">export default &#123;</div><div class="line">  data() &#123;</div><div class="line">    return &#123;</div><div class="line">      // count: 0</div><div class="line">    &#125;;</div><div class="line">  &#125;,</div><div class="line">  methods: &#123;</div><div class="line">    add() &#123;</div><div class="line">      // 千万不要这么用，不符合 vuex 的设计理念</div><div class="line">      // this.$store.state.count++;</div><div class="line">      this.$store.commit(&quot;increment&quot;);</div><div class="line">    &#125;,</div><div class="line">    remove() &#123;</div><div class="line">      this.$store.commit(&quot;subtract&quot;, &#123; c: 3, d: 1 &#125;);</div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">  computed:&#123;</div><div class="line">    fullname: &#123;</div><div class="line">      get()&#123;&#125;,</div><div class="line">      set()&#123;&#125;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;;</div><div class="line">&lt;/script&gt;</div><div class="line"></div><div class="line">&lt;style lang=&quot;scss&quot; scoped&gt;</div><div class="line"></div><div class="line">&lt;/style&gt;</div></pre></td></tr></table></figure>
<p>获取数据组件 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line">&lt;template&gt;</div><div class="line">  &lt;div&gt;</div><div class="line">    &lt;!-- &lt;h3&gt;&#123;&#123; $store.state.count &#125;&#125;&lt;/h3&gt; --&gt;</div><div class="line">    &lt;h3&gt;&#123;&#123; $store.getters.optCount &#125;&#125;&lt;/h3&gt;</div><div class="line">    </div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/template&gt;</div><div class="line"></div><div class="line">&lt;script&gt;</div><div class="line">&lt;/script&gt;</div><div class="line"></div><div class="line">&lt;style lang=&quot;scss&quot; scoped&gt;</div><div class="line"></div><div class="line">&lt;/style&gt;</div></pre></td></tr></table></figure>

          
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/20/Git使用/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/20/Git使用/" itemprop="url">git 基本使用</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-20T14:53:22+08:00">
                2017-09-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="操作计算机的两种方式"><a href="#操作计算机的两种方式" class="headerlink" title="操作计算机的两种方式"></a>操作计算机的两种方式</h2><ol>
<li>图形界面–将命令转换为图形</li>
<li>命令行 –命令窗口<h2 id="命令的通用规则"><a href="#命令的通用规则" class="headerlink" title="命令的通用规则"></a>命令的通用规则</h2></li>
</ol>
<ul>
<li>命令 [选项] [参数]–后面两个可选<ul>
<li>ls -al —-命令-选项</li>
<li>ls -a ./abc –命令-选项-参数<h2 id="DOS-和-shell-的区别"><a href="#DOS-和-shell-的区别" class="headerlink" title="DOS 和 shell 的区别"></a><code>DOS</code> 和 <code>shell</code> 的区别</h2></li>
</ul>
</li>
<li>工作环境<ul>
<li>dos(window)</li>
<li>shell(linus)–分类：csh ksh bash<h2 id="shell-bash-常用命令"><a href="#shell-bash-常用命令" class="headerlink" title="shell bash 常用命令"></a>shell bash 常用命令</h2></li>
</ul>
</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/20/Git使用/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/20/require.js的使用方法和sea.js/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/20/require.js的使用方法和sea.js/" itemprop="url">Javascript模块化编程require.js的用法和sea.js</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-20T14:52:18+08:00">
                2017-09-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h1 id="为什么要用require-js"><a href="#为什么要用require-js" class="headerlink" title="为什么要用require.js?"></a>为什么要用require.js?</h1><p>最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line">&lt;script src=<span class="string">"1.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line">&lt;script src=<span class="string">"2.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line">&lt;script src=<span class="string">"3.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line">&lt;script src=<span class="string">"4.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line">&lt;script src=<span class="string">"5.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line">&lt;script src=<span class="string">"6.js"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div></pre></td></tr></table></figure>
<p>这段代码依次加载多个js文件。</p>
<p>这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。</p>
<p>require.js的诞生，就是为了解决这两个问题</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line">（<span class="number">1</span>）实现js文件的异步加载，避免网页失去响应；</div><div class="line">（<span class="number">2</span>）管理模块之间的依赖性，便于代码的编写和维护。</div></pre></td></tr></table></figure>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/20/require.js的使用方法和sea.js/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/20/cookie和sesson/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/20/cookie和sesson/" itemprop="url">cookie和session</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-20T14:52:18+08:00">
                2017-09-20
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="javascript操作cookie的方法"><a href="#javascript操作cookie的方法" class="headerlink" title="javascript操作cookie的方法"></a>javascript操作cookie的方法</h2><p><strong>cookie存储数据限制</strong></p>
<p>cookie的存储数据量限制：4kByte 4096个英文字符</p>
<p><strong>cookie分类</strong></p>
<ul>
<li>会话cookie，数据存储在内存，浏览器关闭后就消失了</li>
<li>持久cookie，数据存储在浏览器指定的文件中，过期之后消失</li>
</ul>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/20/cookie和sesson/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/13/canvas/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/13/canvas/" itemprop="url">canvas</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-13T11:23:03+08:00">
                2017-09-13
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h3 id="什么是canvas"><a href="#什么是canvas" class="headerlink" title="什么是canvas"></a>什么是canvas</h3><ol>
<li>是一个元素 HTML5元素</li>
<li>画布 本身没有回话功能，需要通过 javascript 来实现</li>
<li>默认大小是  300*150</li>
<li>设置宽高不要在 css 里面设置；因为在哪里设置只是拉伸，写位置时还是按照 300*150 进行定位</li>
<li>设置宽高 <code>&lt;canvas height=&quot;300&quot; width=&quot;600&quot;&gt;&lt;/canvas&gt;</code>这样进行设置</li>
<li>在浏览器解析的时候，会解析成图片</li>
</ol>
<p>模板：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&lt;body&gt;</div><div class="line">&lt;canvas width=<span class="string">"600"</span> height=<span class="string">"400"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span></div><div class="line">&lt;script&gt;</div><div class="line">    <span class="keyword">var</span> canvas = <span class="built_in">document</span>.querySelector(<span class="string">'canvas'</span>);</div><div class="line">    <span class="keyword">var</span> ctx = canvas.getContext(<span class="string">'2d'</span>);</div><div class="line">    </div><div class="line">   ....(要实现的内容)</div><div class="line">   </div><div class="line">&lt;<span class="regexp">/script&gt;</span></div><div class="line"><span class="regexp">&lt;/</span>body&gt;</div></pre></td></tr></table></figure></p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/13/canvas/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/07/选择器/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/07/选择器/" itemprop="url">CSS选择器</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-07T20:53:03+08:00">
                2017-09-07
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h3 id="css中的选择器"><a href="#css中的选择器" class="headerlink" title="css中的选择器"></a>css中的选择器</h3><h2 id="1"><a href="#1" class="headerlink" title="1. *"></a>1. *</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">* &#123;</div><div class="line">  margin: <span class="number">0</span>;</div><div class="line">  padding: <span class="number">0</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p><code>*</code>也可以用来选择某元素的所有子元素。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">#container * &#123;</div><div class="line">  border: <span class="number">1</span>px solid black;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>它会选中<code>#container</code>下的所有元素。当然，我还是不建议你去使用它，如果可能的话。</p>
<h2 id="2-X"><a href="#2-X" class="headerlink" title="2. #X"></a>2. #X</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">#container &#123;</div><div class="line">   width: 960px;</div><div class="line">   margin: auto;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>在选择器中使用<code>#</code>可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心的。<br>需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？</p>
<p><code>id</code>选择器是很严格的并且你没办法去复用它。如果可能的话，首先试试用标签名字，HTML5中的新元素，或者是伪类。</p>
<h2 id="3-X"><a href="#3-X" class="headerlink" title="3. .X"></a>3. .X</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">.error &#123;</div><div class="line">  color: red;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>这是个<code>class</code>选择器。它跟<code>id</code>选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用<code>class</code>。当你要对某个特定的元素进行修饰那就是用<code>id</code>来定位它。</p>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/07/选择器/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/02/递归/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/02/递归/" itemprop="url">递归</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-02T11:52:11+08:00">
                2017-09-02
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <h2 id="递归：就是自身调用自身"><a href="#递归：就是自身调用自身" class="headerlink" title="* 递归：就是自身调用自身"></a>* 递归：就是自身调用自身</h2><ol>
<li>这里 fn1 在等待 fn2 执行完返回的指令</li>
<li>fn2 在等待 fn3 执行完返回的指令</li>
<li>fn3 在等待 fn4 执行完返回的指令</li>
<li>fn4 执行完返回指令 fn3 收到 fn4 执行完的通知  -fn3执行</li>
<li>fn3 执行完返回指令 fn2 收到 fn3 执行完的通知  -fn2执行</li>
<li>fn2 执行完返回指令 fn1 收到 fn2 执行完的通知  -fn1执行</li>
</ol>
<hr>
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/02/递归/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
      

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2017/09/02/闭包/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="shine-wl">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Hexo">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
                
                <a class="post-title-link" href="/2017/09/02/闭包/" itemprop="url">闭包</a></h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-09-02T11:52:11+08:00">
                2017-09-02
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        
          <ul>
<li>闭包就是能够读取其他函数内部变量的函数</li>
<li>由于在 JavaScript 中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解为 “定义在一个函数内部的函数”</li>
<li>所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁</li>
</ul>
<p>简述闭包流程</p>
<ol>
<li>如果一个函数内部返回了一个函数或多个函数</li>
<li>而返回的函数中具有对自己的外层作用域中的成员的读取或修改</li>
<li>那么称这个函数叫做闭包函数</li>
<li>为什么在外部拿到该函数就可以访问内层函数的成员？<ul>
<li>原因就在于：函数的作用域链以函数定时时的位置为准</li>
<li>这里就利用函数实现了对内部 foo 变量的读取和修改
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="/2017/09/02/闭包/#more" rel="contents">
              阅读全文 &raquo;
            </a>
          </div>
          <!--/noindex-->
        
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      

      

      
      
        <div class="post-eof"></div>
      
    </footer>
  </div>
  
  
  
  </article>


    
  </section>

  
  <nav class="pagination">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/"><i class="fa fa-angle-right"></i></a>
  </nav>



          </div>
          


          

        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      

      <section class="site-overview sidebar-panel sidebar-panel-active">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="http://dynamic-image.yesky.com/300x-/uploadImages/upload/20140912/upload/201409/wylnwjynkxijpg.jpg"
               alt="shine-wl" />
          <p class="site-author-name" itemprop="name">shine-wl</p>
           
              <p class="site-description motion-element" itemprop="description"></p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
            
              <a href="/archives/">
            
                <span class="site-state-item-count">21</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          

          
            
            
            <div class="site-state-item site-state-tags">
              
                <span class="site-state-item-count">15</span>
                <span class="site-state-item-name">标签</span>
              
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
        </div>

        
        

        
        

        


      </section>

      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2017</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">shine-wl</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动</div>

  <span class="post-meta-divider">|</span>

  <div class="theme-info">主题 &mdash; <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.2</div>


        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.2"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.2"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.2"></script>



  
    <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.2"></script>

  

  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.2"></script>



  


  




	





  





  








  





  

  

  

  

  

  

</body>
</html>
